<template>
  <div class="comp-wrap">
    <section class="comp-list base">
      <p class="comp-label" @click="show_base = !show_base">
        <i class="ico el-icon-arrow-down"></i>基础组件
      </p>
      <ul class="list-wrap" :class="{'hide':!show_base}">
        <li
          class="comp"
          v-for="(item,index) in compList.base.filter(i=>i.visible)"
          :key="index"
          title="点击选择"
          @click="createComp('base',item)"
        >{{item.name}}</li>
      </ul>
    </section>
    <section class="comp-list senior">
      <p class="comp-label" @click="show_senior = !show_senior">
        <i class="ico el-icon-arrow-down"></i>高级组件
      </p>
      <ul class="list-wrap" :class="{'hide':!show_senior}">
        <li
          class="comp"
          v-for="(item,index) in compList.senior.filter(i=>i.visible)"
          :key="index"
          title="点击选择"
        >{{item.name}}</li>
      </ul>
    </section>
    <section class="comp-list layout">
      <p class="comp-label" @click="show_select = !show_select">
        <i class="ico el-icon-arrow-down"></i>已选组件
      </p>
      <ul class="list-wrap select-wrap" :class="{'hide':!show_select}">
        <li
          class="select-comp"
          :class="{'selected': item.uid === currentID}"
          v-for="item in selectedList"
          :key="item.uid"
          @click="changeSelect(item.uid)"
        >{{item.name}}</li>
      </ul>
    </section>
  </div>
</template>

<script>
import nanoid from "nanoid";
import widgets from "@widgets/config";
import Bus from "@utils/bus";
export default {
  name: "componentsPen",
  data() {
    return {
      show_base: true,
      show_senior: true,
      show_select: true
    };
  },
  computed: {
    currentID() {
      return this.$store.state.currentID;
    },
    compList() {
      return widgets;
    },
    selectedList() {
      return this.$store.state.selectCompList;
    }
  },
  mounted() {},
  methods: {
    createComp(type, compInfo) {
      let tempObj = JSON.parse(JSON.stringify(compInfo)); // 简单深拷贝
      let newInfo = { uid: nanoid(), ...tempObj };
      console.log("newInfo", newInfo);
      this.$store.commit("addComp", newInfo);
    },
    changeSelect(compID) {
      this.$store.commit("setSelect", compID);
    }
  }
};
</script>

<style lang="stylus" scoped>
.comp-wrap
  padding 10px
  flex none
  width 300px
  background #fff
.ico
  margin-right 20px
.comp-list
  margin-bottom 10px
.comp-label
  cursor pointer
  text-align left
  height 30px
  line-height 30px
  padding-left 10px
  border-bottom 2px solid #e4e7ed
.list-wrap
  display flex
  flex-wrap wrap
  &.hide
    height 0
    overflow hidden
.comp
  flex none
  margin-top 10px
  cursor pointer
  color #000
  width 30%
  height 30px
  background #f4f6fc
  border 1px dashed #f4f6fc
  display flex
  justify-content center
  align-items center
  transition all 0.2s
  &:hover
    border-color #409eff
    color #409eff
  &:nth-child(3n+2)
    margin-left 5%
    margin-right 5%
.select-wrap
  flex-direction column
.select-comp
  cursor default
  display flex
  align-items center
  justify-content center
  margin-top 10px
  height 30px
  background #f4f6fc
  transition all 0.2s
  &:hover
    background #d0d2d8
  &.selected
    background #000
    color #fff
</style>
